<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>贪吃蛇</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			h1, h2 {
				text-align: center;
			}
			#map {
				width: 600px;
				height: 600px;
				border: 5px solid black;
				margin: 100px auto 0;
			}

			#map>div {
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
				background-color: pink;
				border-radius: 2px;
			}

			#map>.snake {
				background-color: green;
			}

		</style>
	</head>
	<body>
		<h1>贪吃蛇</h1>
		<h2 id="score">得分: 0分</h2>
		<div id="map">
			
		</div>
		
	</body>
</html>
<script>
	// 获取元素
	var scoreH = document.getElementById('score');
	var mapDiv = document.getElementById('map');

	// 存放地图的数组
	var mapArr = [];

	// 蛇的数组
	var snakeArr = [];

	// 行数
	var rowNum = 30;

	// 列数
	var colNum = 30;

	// 蛇的长度
	var snakeL = 3;

	// 蛇的方向
	var direction = "r";

	// 蛇头的位置
	var x = 2, y = 0;

	// 能不能改变方向的标记
	var flag = true;

	// 延迟定时器
	var timeout = null;

	// 当前分数
	var score = 0;

	// 食物的位置
	var foodX = 0;
	var foodY = 0;

	var speed = 200;

	// 创建地图
	for (var i = 0; i < rowNum; i++) {
		var arr = [];
		for (var j = 0; j < colNum; j++) {
			// 创建div
			var div = document.createElement('div');
			div.style.width = 20 + 'px';
			div.style.height = 20 + 'px';
			mapDiv.appendChild(div);
			arr.push(div);
		}
		mapArr.push(arr);
	}

	// 创建蛇
	for (var i = 0; i < snakeL; i++) {
		snakeArr[i] = mapArr[0][i];
		snakeArr[i].className = "snake";
	}
	
	// 随机食物
	randomFood();
	var timer = setInterval(move, speed);
speed
	// 蛇移动的函数
	function move() {

		// 蛇动完后可以直接改变方向
		clearTimeout(timeout);
		flag = true;

		// 判断方向
		swspeeditch (direction) {
			case "r":
				x++;
				break;
			case "l":
				x--;
				break;
			case "t":
				y--;
				break;
			case "d":
				y++;
				break;
			default: 
				break;
		}

		// 判断有没有撞墙
		if (x < 0 || x >= colNum || y < 0 || y >= rowNum) {
			clearInterval(timer);
			alert("GAME OVER!!!");
			return;
		}

		// 判断有没有咬到自己
		for (var i = 1; i < snakeArr.length; i++) {
			if (mapArr[y][x] == snakeArr[i]) {
				clearInterval(timer);
				alert("GAME OVER!!!");
				return;
			}
		}



		// 蛇移动
		if (x == foodX && y == foodY) {
			// 如果吃到了食物	
			snakeArr.push(mapArr[foodY][foodX]);
			score++;
			speed -= 10;
			clearInterval(timer);
			timer = setInterval(move, speed);
			scoreH.innerHTML = "得分: " + score + "分";
			randomFood();

		} else {
			// 蛇尾巴颜色去掉
			snakeArr[0].className = "";
			// 把蛇尾巴从数组中删除
			snakeArr.shift();	

			// 添加蛇头
			mapArr[y][x].className = "snake";
			snakeArr.push(mapArr[y][x]);
		}


	}


	document.onkeydown = function(e) {

		// 两次改变方向之间有一个时间
		if (flag) {
			flag = false;
			timeout = setTimeout(function() {
				flag = true;
			}, speed);
		} else {
			return;
		}

		// 特殊情况
		if (e.keyCode == 37 && direction == "r") return;
		if (e.keyCode == 38 && direction == "d") return;
		if (e.keyCode == 39 && direction == "l") return;
		if (e.keyCode == 40 && direction == "t") return;

		switch (e.keyCode) {
			case 37:
				direction = "l";
				break;
			case 38:
				direction = "t";
				break;
			case 39:
				direction = "r";
				break;
			case 40:
				direction = "d";
				break;
			default:
				break;
		}

	};

	// 随机产生食物
	function randomFood() {
		foodX = Math.floor(Math.random() * colNum);
		foodY = Math.floor(Math.random() * rowNum);

		// 食物不能在蛇身上
		if (mapArr[foodY][foodX].className == "snake") {
			randomFood();
		} else {
			mapArr[foodY][foodX].className = "snake";
		}


	}

	// 创建地图
	// 创建小蛇
	// 随机食物
	// 蛇动画函数 
		// 1. 根据方向进行移动
		// 2. 键盘事件控制方向
		// 3. 撞到墙, 咬到自己就挂
		// 4. 吃到食物 + 分, 长度变化, 随机食物
		// 5. 没吃到食物, 添头去尾



</script>





